import React, { useEffect, useState } from "react";
import Dh from "../../compoengts/hooks/Hooks";
import { SearchBar, Tabs } from "antd-mobile";
import instance from "../../api/instance";
import { ProductCard } from "react-vant";
import { InfiniteScroll, List } from "antd-mobile";
function Index() {
  let [list, setlist] = useState([]);
  let [page, setpage] = useState(1);
  const [hasMore, setHasMore] = useState(true);
  let xr = async () => {
    const res = await instance.get("/api/list", { params: { page } });
    let { data, code } = res.data;
    console.log(res.data);
    if (code == 200) {
      setlist([...list, ...data]);
      setpage((sx) => sx + 1);
    }
  };
  useEffect(() => {
    xr();
  }, []);
  return (
    <div>
      <SearchBar placeholder="请输入内容" />
      <Tabs>
        <Tabs.Tab title="关注" key="fruits1">
          关注
        </Tabs.Tab>
        <Tabs.Tab title="推荐" key="vegetable2s">
          {list?.map((item, index) => (
            <div key={index}>
              <ProductCard
                num={item.price}
                price={item.id}
                desc={item.title}
                title={item.date}
                thumb={item.image}
              />
            </div>
          ))}
          <InfiniteScroll loadMore={xr} hasMore={hasMore} />
        </Tabs.Tab>
        <Tabs.Tab title="热榜" key="animals3">
          热榜
        </Tabs.Tab>
        <Tabs.Tab title="故事" key="animals4">
          故事
        </Tabs.Tab>
        <Tabs.Tab title="专栏" key="animals5">
          专栏
        </Tabs.Tab>
        <Tabs.Tab title="直播" key="animals6">
          直播
        </Tabs.Tab>
        <Tabs.Tab title="听书" key="animals7">
          听书
        </Tabs.Tab>
        <Tabs.Tab title="电影" key="animals8">
          电影
        </Tabs.Tab>
        <Tabs.Tab title="游戏" key="animals9">
          游戏
        </Tabs.Tab>
        <Tabs.Tab title="漫画" key="animals10">
          漫画
        </Tabs.Tab>
      </Tabs>
    </div>
  );
}

export default Dh(Index);
